*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}

a{
    text-decoration: none;
}

.container{
    margin: 50px auto;
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
    width: 800px;
    height: 350px;
    
}

  .left,.left2,.left3,.left4,.left5,.left6,.left7,.left8{float: left;position: relative;box-sizing: border-box;width: 200px;height: 300px;border-right: 1px dashed #ddd;
    background: url(https://kaola-haitao.oss.kaolacdn.com/4O1yWA5GGK2deliT06U9x6wSNf_330_542T1811012029_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left2{background: url(https://kaola-haitao.oss.kaolacdn.com/baf3e28a-5f93-4afa-8170-5d0de7595c3fT19010151349_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left3{background: url(https://kaola-haitao.oss.kaolacdn.com/ea4c0ff8-83af-495d-8823-0c96642370bbT2001201852_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left4{background: url(https://kaola-haitao.oss.kaolacdn.com/8afaae29-a31c-4dab-b89d-138b2f70fee4T21011116010_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left5{background: url(https://kaola-haitao.oss.kaolacdn.com/7ShrbiO5blFkRpBisIbCT1811271509_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left6{background: url(https://kaola-haitao.oss.kaolacdn.com/yS4rMviMybWqfgScidc9PCfxd8T1811272039_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left7{background: url(https://kaola-haitao.oss.kaolacdn.com/bea0bb34-ad80-4d9c-8451-15970511d69bT19010111903_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
  .left8{background: url(https://kaola-haitao.oss.kaolacdn.com/4e33f8d0-6ff3-4053-a4d2-0f6c487438e7T1908091341_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}

  .you,.you2,.you3,.you4,.you5,.you6,.you7,.you8{
    float: right;
    position: relative;
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border-right: 1px dashed #ddd;
    background-size: 100%;
}
.you2{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcb*m7dZn2JEQc9kQou8SjhinIyoWqaFsfae4bmVKVPM06ksGnvipnnoL5PVf0geGrpemK0z2f*2eKLsaXykvnbk!/r) no-repeat;background-size: 100%;
}
.you3{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxerHm4ncolzmWvbUW3O6tj7SmHx3jLuXjr85ZiWxU55IxmfK7VPmsLirHVugdK6tdY!/r) no-repeat;background-size: 100%;
}
.you4{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxcTqfvUhk*KTPgu.lK8Vr4b23KwewpZwlGmg5SUjFWde9TLilIbqUw42AB6mxCqmpY!/r) no-repeat;background-size: 100%;
}
.you5{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO41n3vSkT7pjNPuHc0LWMXnwtwBlD8GaTBLz6AkAalcK6XLukeea8yd8..pt1oKKqU!/r) no-repeat;background-size: 100%;
}
.you6{ background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcbtO.KUgjssdX*8MOza7gBPYihg7PD5yfygCCl0Lx5fFcI5Kj4B3L5veKOzLeYumv1.MQhfsnX1A6oFRtwVIAZ8!/r) no-repeat;background-size: 100%;
}
.you7{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4xocr4tWCli2GHdnzwQ5aJ0h4UHBSiunYAJXS9m3NTdVA0ZXdhl6Vc03AQEKXP9tM!/r) no-repeat;background-size: 100%;
}
.you8{
    background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4TAw4BqXXmZk93M3PiJQIBp7vg5V1LqM0KuydLdQhVGb0QfUFFXAJm0CxT9aiA3Yk!/r) no-repeat;background-size: 100%;
}

.left .wrap{
    padding: 40px;
}

 h3{
    font-size: 26px;
    padding-bottom: 20px;
}
 .a-wrap{
    background: rgb(224, 87, 23);
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-bottom: 20px;

}
.left-wrap a {
    color:rgb(26, 26, 25);
    padding-bottom: 20px;
}

.left img{
    position: absolute;
    top:50px;
    right: 35px;
    width: 40%;
}

.right{
    box-sizing: border-box;
    width: 600px;
    height: 350px;
    float: left;
}
.container ul li{
    box-sizing: border-box;
    float: left;
    width: 200px;
    height: 150px; 
}

ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3){
    border-bottom: 1px dashed #ddd;
}
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(4),
ul li:nth-child(5){
    border-right: 1px dashed #ddd;
}

.right-li{
    padding: 20px;
    position: relative;
}

.right-li img{
    position: absolute;
    top:10px;
    right: 10px;
    width: 120px;
    height: 120px;
}

.right-li img:hover{
    transform:translateX(-10px);
    transition: all .5s ease;
    
}

.right .a-wrap{
    width: 50px;
    height: 20px;
    line-height: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 10px;
}
p{
  font-size: 15px;
  color:gray;
}
span{
  font-size: 20px;
  color: black;
}

   ul{
        list-style: none;/* 清除小黑圆点 */
        margin: 0;
        padding: 0;/* 内边距 */
        
    }
    #wrap2{
        width: 60px;
        height: 225px;
        border: 0.5px solid;
        position: fixed;
        z-index: 1000;      
    }
    #head2{
        font-weight: bold;
        width: 60px;
        height: 40px;
        background-color: white;
        line-height: 40px;/* 行高=高度 垂直居中 */
        font-size: 14px;
        color: #000000;/* 文字颜色 白色 */
        text-align: center;/* 文本对齐方式 居中 */
    }
    #list2:hover{
        color: tomato;
        background-color: silver;
    }
    #list2{
        box-sizing: border-box;/* content box css3盒模型 怪异盒 */
        width: 60px;
        padding: 3px;
        margin-top: 0.5px;/* 上边距 */
        margin-bottom: 0.5px;
        background-color: white;
        text-align: center;
        font-size: 12px;
        color: #9A9C9E;
    }




/* 类选择器 */
.imgbox {

/* 避免因窗口变化影响图片效果 */
width: 100%;
height: 100%;
margin: 0 auto;
float: left;
background-size: 100%;

}

.img {
width: 60%;
height: 40%;
margin: 0 auto;
display: none;
}